<template>
  <div class="page">
    <page-header></page-header>
    <div class="login">
      <section class="spice-container spice-padding spice-bk">
        <article class="spice-article spice-bottom spice-max-w">
          <div class="spice-title">
            <h2>登录</h2>
          </div>
        </article>
        <article
          class="spice-article spice-login spice-float-clearfix e-login spice-max-w"
        >
          <div class="spice-login-left">
            <div class="spice-login-form spice-login-visitor spice-open">
              <div class="spice-login-form-content is-phone-login">
                <!--账号登录-->
                <div class="spice-login-warp spice-login-warp-password">
                  <div class="spice-form-group">
                    <div class="spice-validator-slot">
                      <div class="spice-form-validator">
                        <label class="spice-label">手机号码/电子邮箱</label>
                        <div class="spice-input">
                          <el-input
                            type="text"
                            v-model="ruleForm2.username"
                            auto-complete="off"
                            placeholder="请输入电子邮箱或手机号"
                            clearable
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="spice-form-group">
                    <div class="spice-validator-slot">
                      <div class="spice-form-validator">
                        <label class="spice-label">密码</label>
                        <div class="spice-input">
                          <el-input
                            type="password"
                            class="spice-input-match"
                            v-model="ruleForm2.password"
                            placeholder="密码"
                            show-password
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="spice-form-group spice-form-group-password">
                      <div class="spice-validator-slot">
                        <div class="spice-checkbox">
                          <label style="padding-left: 0px">
                            <el-checkbox
                              v-model="autoLogin"
                              style="padding-left: 0px"
                              >记住我</el-checkbox
                            >
                          </label>
                        </div>
                      </div>
                    </div>
                    <!--登录按钮-->
                    <div class="spice-form-group spice-form-group-btn">
                      <div class="spice-validator-slot">
                        <div class="spice-btn-group">
                          <a
                            @click="login"
                            class="spice-btn spice-form-btn-submit spice-btn-golden"
                          >
                            登录</a
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="spice-login-right">
            <div class="spice-login-form spice-login-member">
              <div class="spice-login-form-title">
                <h3>没有账户？</h3>
              </div>
              <div class="spice-login-form-content">
                <p>拥有古驰账户您将获得以下权利：</p>
                <ul>
                  <li>保存您的心愿清单</li>
                  <li>个性化您的推荐内容</li>
                  <li>订单寄送追踪及退换货管理</li>
                </ul>
                <div class="spice-btntop">
                  <a
                    class="spice-btn spice-btn-black e-payment-modify"
                    @click="showRegister"
                  >
                    创建账户</a
                  >
                </div>
              </div>
            </div>
          </div>
        </article>
      </section>
      <el-dialog :visible.sync="register" :before-close="handleClose">
        <div class="spice-dialog-scroller">
          <div class="spice-dialog-scroller-container">
            <div class="spice-dialog-container">
              <div class="spice-dialog-content">
                <div class="spice-dialog-header-register-slot">
                  <div class="spice-dialog-title">创建您的账户</div>
                  <div class="spice-dialog-paragraph">
                    <div class="spice-dialog-form spice-input-gray">
                      <form spice-action="" spice-method="get">
                        <div class="spice-form-group">
                          <div
                            class="spice-validator-slot spice-form-validator"
                          >
                            <label class="spice-label">手机号码/电子邮箱</label>
                            <div class="spice-input">
                              <el-input
                                type="text"
                                placeholder="请输入手机号码/电子邮箱"
                                v-model="ruleForm.username"
                                clearable
                              ></el-input>
                            </div>
                          </div>
                        </div>
                        <div class="spice-form-group message-code">
                          <div
                            class="spice-validator-slot spice-form-identifying-code"
                          >
                            <div
                              class="spice-form-validator spice-identifying-code spice-float-clearfix"
                            >
                              <label class="spice-label">密码</label>
                              <div class="spice-input spice-input-gray">
                                <el-input
                                  type="password"
                                  placeholder="输入密码"
                                  show-password
                                  v-model="ruleForm.password"
                                ></el-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="spice-form-group password-place-pc">
                          <div
                            class="spice-validator-slot spice-float-clearfix"
                          >
                            <div class="spice-form-validator">
                              <label class="spice-label">重复密码</label>
                              <div class="spice-input spice-input-gray">
                                <el-input
                                  type="password"
                                  placeholder="再次输入密码"
                                  show-password
                                  v-model="ruleForm.confirmpassword"
                                ></el-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="spice-form-group password-place-pc">
                          <div
                            class="spice-validator-slot spice-float-clearfix"
                          >
                            <div class="spice-form-validator">
                              <label class="spice-label">验证码</label>
                              <div
                                class="spice-input spice-input-gray"
                                style="display: flex"
                              >
                                <img
                                  :src="captchaApi"
                                  @click="changCaptcha"
                                  @load="verifyLoadState = true"
                                />
                                <el-input
                                  type="text"
                                  v-model="ruleForm.captcha"
                                  placeholder="验证码"
                                >
                                </el-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="spice-form-group btn-margin">
                          <div class="spice-validator-slot">
                            <div class="spice-btn-group">
                              <el-button
                                class="spice-btn e-new-user-account-login spice-btn-golden"
                                type="primary"
                                @click="handleSubmit"
                                >注册</el-button
                              >
                            </div>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      register: false,
      ruleForm: {
        username: "",
        password: "",
        confirmpassword: "",
        captcha: "",
      },
      ruleForm2: {
        username: "",
        password: ""
      },
      autoLogin:false,
      captchaApi: "/api/lib/svg",
    };
  },
  methods: {
    handleClose() {
      this.register = false;
    },
    showRegister() {
      this.register = true;
    },
    changCaptcha(e) {
      if (!this.verifyLoadState) {
        return false;
      }
      this.verifyLoadState = false;
      this.captchaApi = this.captchaApi + "?" + e.timeStamp;
    },
    handleSubmit() {
      if (!Object.values(this.ruleForm).every((val) => val)) {
        return this.$message({
          message: "请认真填写信息",
          type: "error",
        });
      }
      if (this.ruleForm.password != this.ruleForm.confirmpassword) {
        return this.$message({
          message: "两次密码不一致",
          type: "error",
        });
      }
      this.$api
        .loginRgister({
          ...this.ruleForm,
        })
        .then((res) => {
          if (res.code) {
            this.$successMsg("注册成功");
            this.$store.dispatch("setUser", {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            });
            this.$router.push({ path: "/Home" });
          } else {
            this.$message({
              message: res.data,
              type: "error",
            });
          }
        });
    },
    login() {
      if (!Object.values(this.ruleForm2).every((val) => val)) {
        return this.$message({
          message: "请认真填写信息",
          type: "error",
        });
      }
      this.$api
        .islogin({
          ...this.ruleForm2,
        })
        .then((res) => {
          if (res.code) {
            this.$successMsg("登录成功");
            if (this.autoLogin) {
            }
            this.$store.dispatch("setUser", {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            });
            this.$router.push({ path: "/Home" });
          } else {
            this.$message({
              message: res.data,
              type: "error",
            });
          }
        });
    },
  },
};
</script>

<style lang="scss">
.login {
  margin-top: 170px;
  margin-bottom: 20px;
  .spice-btn-golden {
    background: #1b1b1b;
    border: 2px solid #1b1b1b;
    color: #e5dfd9;
    padding-left: 60px;
    padding-right: 60px;
  }
  .spice-dialog-scroller {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    .spice-dialog-scroller-container .spice-dialog-content {
      min-width: auto;
    }
    .spice-dialog-header-register-slot {
      width: 440px;
      padding: 0px;
    }
  }
  .el-dialog__body {
    padding: 10px;
  }
}

.spice-login > div .spice-login-form .is-phone-login .spice-login-warp-password,
.spice-login > div .spice-login-form .spice-login-warp-phone {
  display: block;
}
</style>